<template>
  <div>
    <div><input type="text" v-model="searchVal"><button @click="saySomething">添加评论</button></div>
    <div class="say-list">
      <div v-for="item of talkList">{{ item.message }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useNormalStore } from '@/store/normal'
import { storeToRefs } from 'pinia'
let searchVal = ref('')
let normalStore = useNormalStore()
let { talkList } = storeToRefs(normalStore)

function saySomething() {
  talkList.value.push({message: searchVal.value})
}

// normalStore里面的state发生变化时触发
normalStore.$subscribe((mutate, state) => {
  console.log('mutate', mutate)
  localStorage.setItem('talkList', JSON.stringify(state.talkList))
})
</script>

<style lang="scss" scoped>
.say-list {
  min-height: 50px;
  border: 2px solid sandybrown;
}
</style>